<template>
	<view class="warp">
		<view class="status_bar" style="background-color: #FFF;">
			<!-- 这里是状态栏 -->
		</view>
		<view style="width: 100%;display: flex;justify-content: space-between; box-sizing: border-box;padding: 12rpx 16rpx;background-color: #FFF;align-items: center;" >
			<view style="display: flex;justify-content: space-between;align-items: center; box-sizing: border-box;">
				<view style="width: 72rpx;" @click="goBack">
					<view style="border: 2rpx solid #E5E6E8;border-radius: 24rpx;">
						<image style="width: 36rpx;height: 36rpx;margin: 16rpx 16rpx 4rpx;" src="/static/images/icon/left-icon.png"></image>
					</view>
				</view>
			</view>
			<view>
				<view style="font-size: 32rpx;color: #232426;margin-left: 16rpx;font-weight: 500;">已追蹤標籤</view>
			</view>
			<view style="display: flex;justify-content: flex-end;box-sizing: border-box;">
				
			</view>
		</view>
		<view style="padding: 32rpx 24rpx;height: 800rpx;">
			
			<view v-for="(item,index) in topic_list" :key="index" style="width:100%;border-top: 1rpx solid #F6F8FA;">
				<view style="display: flex;justify-content: space-between;align-items: center;padding:32rpx 24rpx;box-sizing: border-box;">
					<view style="display: flex;justify-content: flex-start;align-items: center;">
						<view>
							<u-image
								:src="item.avatar"
								width="84rpx"
								height="84rpx"
								radius="50%"
							></u-image>
						</view>
						<view style="margin-left: 20rpx;">
							<view style="font-size: 28rpx;color: #020202;">{{item.nickname}}</view>
							<view style="font-size: 20rpx;color: #BEC0C5;margin-top: 8rpx;" >{{item.fans}} 人在追蹤</view>
						</view>
					</view>
					<view style="padding: 12rpx 20rpx;border:1rpx solid #E5E6E8; border-radius: 200rpx;background-color: #F6F8FA;color: #7A7B7E;display: inline-block;font-size:28rpx;">
						已追蹤
					</view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:1,
				user_info:{},
				focus_list:[{
					id:1,
					avatar:'/static/images/icon/images/avatar.jpg',
					nickname:'Magic___-',
					fans:'1,546 人在追蹤'
				},{
					id:2,
					avatar:'/static/images/icon/images/avatar.jpg',
					nickname:'田野黃金成道',
					fans:'348 人在追蹤'
				},{
					id:3,
					avatar:'/static/images/icon/images/avatar.jpg',
					nickname:'keepert04u',
					fans:'2,891 人在追蹤'
				},{
					id:4,
					avatar:'/static/images/icon/images/avatar.jpg',
					nickname:'RD97231690_',
					fans:'45 人在追蹤'
				},{
					id:5,
					avatar:'/static/images/icon/images/avatar.jpg',
					nickname:'Magic___-',
					fans:'1 人在追蹤'
				}],
				fans_list:[{
					id:1,
					avatar:'/static/images/icon/images/avatar.jpg',
					nickname:'Magic___-',
					fans:'1,546 人在追蹤'
				},{
					id:2,
					avatar:'/static/images/icon/images/avatar.jpg',
					nickname:'田野黃金成道',
					fans:'348 人在追蹤'
				},{
					id:3,
					avatar:'/static/images/icon/images/avatar.jpg',
					nickname:'keepert04u',
					fans:'2,891 人在追蹤'
				},{
					id:4,
					avatar:'/static/images/icon/images/avatar.jpg',
					nickname:'RD97231690_',
					fans:'45 人在追蹤'
				},{
					id:5,
					avatar:'/static/images/icon/images/avatar.jpg',
					nickname:'Magic___-',
					fans:'1 人在追蹤'
				}],
				topic_list:[
					{
						id:1,
						avatar:'/static/images/icon/topic.png',
						nickname:'每家',
						fans:'1,546'
					},
					{
						id:1,
						avatar:'/static/images/icon/topic.png',
						nickname:'美甲',
						fans:'1,546'
					},
					{
						id:1,
						avatar:'/static/images/icon/topic.png',
						nickname:'健康飲食',
						fans:'1,546'
					},
					{
						id:1,
						avatar:'/static/images/icon/topic.png',
						nickname:'健身',
						fans:'1,546'
					},
					{
						id:1,
						avatar:'/static/images/icon/topic.png',
						nickname:'設計',
						fans:'1,546'
					}
				]
			}
		},
		onLoad(option) {
			this.user_info = uni.getStorageSync('userInfo');
		},
		methods:{
			changeType(type){
				this.type = type;
			},
			goBack(){
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
.warp{
	width: 100%;
	min-height: 100vh;
	.type-item{
		color: #808690;
		font-size: 28rpx;
		line-height: 140%; /* 19.6px */
		letter-spacing: 0.28rpx;
		margin: 8rpx 24rpx;
		padding-bottom: 8rpx;
	}
	.type-item-active{
		color: #232426;
		font-size: 28rpx;
		line-height: 140%; /* 19.6px */
		letter-spacing: 0.28rpx;
		border-bottom: 4rpx solid #232426;
		font-weight: 600;
		margin: 8rpx 24rpx;
		padding-bottom: 8rpx;
	}
}
</style>